<template>
  <el-dialog :title="formType==='create'?'新增合同':'编辑合同'" :visible.sync="openVisible" width="70%" append-to-body v-dialogDrag
             :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="标的信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="标的地址" prop="targetAddress">
              <el-input v-model="form.targetAddress" placeholder="请输入标的地址">
                <template slot="append">
                  <el-button slot="append" @click="openMap"> 地图</el-button>
                </template>
              </el-input>
            </el-form-item>
            <!--<el-form-item label="标的经度" prop="longitude">-->
            <!--  <el-input v-model="form.longitude" placeholder="请输入标的经度" />-->
            <!--</el-form-item>-->
            <!--<el-form-item label="标的纬度" prop="latitude">-->
            <!--  <el-input v-model="form.latitude" placeholder="请输入标的纬度" />-->
            <!--</el-form-item>-->
          </el-col>
          <el-col :span="12">
            <el-form-item label="标的内容">
              <el-input v-model="form.targetContent" placeholder="请输入标的地址" type="textarea" :rows="1"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="经纪/代理信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经纪/代理公司" prop="proxyId" label-width="110px">
              <el-select v-model="form.proxyId" placeholder="请选择经纪/代理公司名称">
                <el-option
                    v-for="dict in proxyList"
                    :key="dict.deptId"
                    :label="dict.deptName"
                    :value="dict.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纪/代理佣金比例" prop="commissionRate">
              <el-input v-model="form.commissionRate" placeholder="请输入经纪/代理佣金比例"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经纪/代理佣金" prop="commission">
              <el-input v-model="form.commission" placeholder="请输入经纪/代理佣金"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纪/代理佣金支付证明上传" prop="fileIds">
              <!--<el-input v-model="form.commission" placeholder="请输入经纪/代理佣金"/>-->
              <file-upload v-model="form.fileIds" :limit="1"></file-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="保险合同回款计划"/>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTbInsuranceContractPremiumPlan">
              添加
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini"
                       @click="handleDeleteTbInsuranceContractPremiumPlan">删除
            </el-button>
          </el-col>
        </el-row>
        <el-table :data="tbInsuranceContractPremiumPlanList" :row-class-name="rowTbInsuranceContractPremiumPlanIndex"
                  @selection-change="handleTbInsuranceContractPremiumPlanSelectionChange"
                  ref="tbInsuranceContractPremiumPlan">
          <el-table-column type="selection" width="50" align="center"/>
          <!--<el-table-column label="序号" align="center" prop="index" width="50"/>-->
          <el-table-column label="批次名称" prop="planName"  align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.planName" placeholder="请输入批次名称"/>
            </template>
          </el-table-column>
          <el-table-column label="计划回款金额" prop="planAmount" width="160" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.planAmount" placeholder="请输入计划回款金额"/>
            </template>
          </el-table-column>
          <el-table-column label="计划回款时间" prop="planDate" align="center" width="250">
            <template slot-scope="scope">
              <el-date-picker clearable v-model="scope.row.planDate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择计划回款时间"/>
            </template>
          </el-table-column>
          <el-table-column label="回款比例" prop="rate" width="160" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.rate" placeholder="请输入回款比例"/>
            </template>
          </el-table-column>
          <el-table-column label="回款责任人" prop="responsiblePerson" align="center" width="160">
            <template slot-scope="scope">
              <el-input v-model="scope.row.responsiblePerson" placeholder="请输入回款责任人"/>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
  </el-dialog>
</template>

<script>
import {isEmpty} from "@/utils/validate";

export default {
  name: "contract",
  props: {
    insureId: {
      type: String,
      default: null
    },
    proxyList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      formType:undefined,
      // 保险合同回款计划表格数据
      tbInsuranceContractPremiumPlanList: [],
      // 子表选中数据
      checkedTbInsuranceContractPremiumPlan: [],
      openVisible: false,
      title: '',
      form: {
        insureId: this.insureId,
        targetAddress: null,
        longitude: null,
        latitude: null,
        targetContent: null,
        commissionRate: null,
        commission: null,
        fileIds: []
      },
      rules: {}
    }
  },
  mounted() {

  },
  methods: {
    /** 保险合同回款计划序号 */
    rowTbInsuranceContractPremiumPlanIndex({row, rowIndex}) {
      row.index = rowIndex + 1;
    },
    /** 保险合同回款计划添加按钮操作 */
    handleAddTbInsuranceContractPremiumPlan() {
      let obj = {};
      obj.insureId = "";
      obj.planName = "";
      obj.planAmount = "";
      obj.planDate = "";
      obj.rate = "";
      obj.demand = "";
      obj.responsiblePerson = "";
      this.tbInsuranceContractPremiumPlanList.push(obj);
    },
    /** 保险合同回款计划删除按钮操作 */
    handleDeleteTbInsuranceContractPremiumPlan() {
      if (this.checkedTbInsuranceContractPremiumPlan.length == 0) {
        this.$modal.msgError("请先选择要删除的保险合同回款计划数据");
      } else {
        const tbInsuranceContractPremiumPlanList = this.tbInsuranceContractPremiumPlanList;
        const checkedTbInsuranceContractPremiumPlan = this.checkedTbInsuranceContractPremiumPlan;
        this.tbInsuranceContractPremiumPlanList = tbInsuranceContractPremiumPlanList.filter(function (item) {
          return checkedTbInsuranceContractPremiumPlan.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleTbInsuranceContractPremiumPlanSelectionChange(selection) {
      this.checkedTbInsuranceContractPremiumPlan = selection.map(item => item.index)
    },
    openMap() {
      this.$modal.msg('打开地图')
    },
    open(formType) {
      this.formType=formType
      if (isEmpty(this.insureId)) {
        this.$modal.msgWarning('请先选择保险');
      }
      this.restForm();
      this.openVisible = true
    },
    restForm() {
      this.form = {
        insureId: this.insureId,
        targetAddress: null,
        longitude: null,
        latitude: null,
        targetContent: null,
        commissionRate: null,
        commission: null,
        fileIds: []
      }
    },
  }
};

</script>


<style scoped lang="scss">

</style>
